<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易计算机</title>
</head>
<body>
    <table border="1">
        <tbody>
            <tr>
                <td colspan="4">
                    <input type="text" readonly id="txtResult"/>
                </td>
            </tr>
            <tr>
                <tr>
                    <td colspan="2"><input type="button" value="CE"
                    onclick="handleCEInput()"/></td>
                    <td colspan="2"><input type="button" value="back"
                        onclick="handleBack()"/></td>
                </tr>
                <td><input type="button" value="7"  
                    onclick="handleNumberInput(this.value)"/></td>
                <td><input type="button" value="8" 
                    onclick="handleNumberInput(this.value)"/> </td>
                <td><input type="button" value="9" 
                    onclick="handleNumberInput(this.value)"/></td>
                <td><input type="button" value="+" 
                    onclick="handleOperateInput(this.value)"/></td>
            </tr>
            <tr>
                <td><input type="button" value="4" 
                    onclick="handleNumberInput(this.value)"/></td>
                <td><input type="button" value="5" 
                    onclick="handleNumberInput(this.value)"/></td>
                <td><input type="button" value="6" 
                    onclick="handleNumberInput(this.value)"/></td>
                <td><input type="button" value="-" 
                    onclick="handleOperateInput(this.value)"/></td>
            </tr>
            <tr>
                <td><input type="button" value="1" 
                    onclick="handleNumberInput(this.value)"/></td>
                <td><input type="button" value="2" 
                    onclick="handleNumberInput(this.value)"/></td>
                <td><input type="button" value="3" 
                    onclick="handleNumberInput(this.value)"/></td>
                <td><input type="button" value="*" 
                    onclick="handleOperateInput(this.value)"/></td>
            </tr>
            <tr>
                <td><input type="button" value="0" 
                    onclick="handleNumberInput(this.value)"/></button></td>
                <td colspan="2"><input type="button" value="=" 
                    onclick="handleEqualInput()"/></td>
                <td><input type="button" value="/" /></td>
            </tr>
        </tbody>
    </table>
</body>
</html>
<script>
    var num1="",num2=""; //定义存放操作数的变量
    var operate=""; //定义存放操作符的变量
    var flag=false; //定义用户是否按下了操作符
    //1.定义处理数字案件的处理方法
    function handleNumberInput(x){
        //将当前输入的数字，加到顶部输入框的末尾
        var obj=document.getElementById("txtResult");
        obj.value +=x;
        if(!flag) //按下操作符之前数字，放入num1
            num1+=x;
        else
            num2+=x;
    }
    //2.定义处理操作按键的处理方法
    function handleOperateInput(ch){
        //1.将当前输入的数字，加到顶部输入框的末尾
        var obj=document.getElementById("txtResult");
        obj.value +=ch;
        //2.记录本次输入的操作符
        operate=ch;
        //3.设置操作符标识为ture
        flag=true;
    }
    //3.定义处理=按键的处理方法
    function handleEqualInput(){
        //1.将当前输入的数字，加到顶部输入框的末尾
        var obj=document.getElementById("txtResult");
        obj.value +="=";
        //2.将num1,mun2里面的内容，按照operate表示的操作进行运算
        var result;
        if(operate =="+")
            result =parseInt(num1)+parseInt(num2);
        if(operate =="-")
            result=parseInt(num1)-parseInt(num2);
        if(operate =="*")
            result=parseInt(num1)*parseInt(num2);
        if(operate =="/")
            result=parseInt(num1)/parseInt(num2);
        //3.显示结果
        obj.value+=result;
    }
    //定义处理CE按键的处理
    function handleCEInput(){
        document.getElementById("txtResult").value="";
        num1="";
        num2="";
        operate="";
        flag=false;
    }

    function handleBack(){
    var obj=document.getElementById("txtResult");
    obj.value=obj.value.substring(0,obj.value.length-1);
    if(!flag){
        num1=num1.substring(0,num1.length-1);;
    }
    if(flag){
        num2=num2.substring(0,num2.length-1);;
    }
    }  
</script>